<template>
    <a :class="className" ref="button">
        <slot></slot>
        <div ref="dialog">
            <p>{{title}}</p>
            <div>
                <button class="ui small red button" @click="handleConfirm">确定</button>
                <button class="ui small button" @click="handleCancel">取消</button>
            </div>
        </div>
    </a>
</template>

<script>
export default {
    name: 'delete-button',
    props: {
        title: {
            type: String,
            default: '确认操作？',
        },
        className: {
            type: String,
            default: 'ui button'
        },
    },
    mounted(){
        this.tooltip = tippy(this.$refs.button, {
            trigger: 'click',
            interactive: 'true',
            theme: 'light',
            arrow: true,
            content: this.$refs.dialog,
        })
    },
    methods: {
        handleConfirm(){
            this.$refs.button._tippy.hide()
            this.$emit('confirm')
        },
        handleCancel(){
            this.$refs.button._tippy.hide()
            this.$emit('cancel')
        },
    }
}
</script>

